<template>
  <div>
    <el-card>
      <!-- 搜索区 -->
      <el-form
        ref="refresh_ref"
        :model="query_info"
        :rules="refresh_rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="账号" prop="key">
              <el-input
                placeholder="请输入账号"
                maxlength="30"
                v-model="query_info.key"
                clearable
                @clear="get_list()"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="query_info.status"
                placeholder="请选择状态"
                clearable
                @clear="get_list()"
              >
                <el-option label="禁用" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="权限组" prop="group_id">
              <el-select
                v-model="query_info.group_id"
                placeholder="请选择权限组"
                clearable
                @clear="get_list()"
              >
                <el-option
                  v-for="item in group_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="添加时间" prop="created_at">
              <el-date-picker
                v-model="query_info.created_at"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="编辑时间" prop="updated_at">
              <el-date-picker
                v-model="query_info.updated_at"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button
            :disabled="btnStatus.store"
            type="info"
            @click="add_dialog_visible = true"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column
          align="center"
          label="编号"
          prop="id"
          width="80"
          fixed="left"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="账号"
          width="100"
          prop="username"
        ></el-table-column>
        <el-table-column
          align="center"
          label="权限组"
          width="100"
          prop="auth_groups.name"
        ></el-table-column>
        <el-table-column
          align="center"
          label="名称"
          width="100"
          prop="name"
        ></el-table-column>
        <el-table-column
          align="center"
          label="手机号"
          width="150"
          prop="phone"
        ></el-table-column>
        <el-table-column align="center" label="状态" prop="status" width="100">
          <template v-slot="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.status ? '启用' : '禁用'"
              placement="top"
              :enterable="false"
            >
              <el-switch
                v-model="scope.row.status"
                :disabled="
                  scope.row.id === 1 || btnStatus.status ? true : false
                "
                active-color="#5FB878"
                inactive-color="#d2d2d2"
                @change="set_status(scope.row)"
              ></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="添加时间"
          prop="created_at"
          width="150"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="编辑时间"
          prop="updated_at"
          width="150"
          sortable
        ></el-table-column>
        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template v-slot="scope">
            <el-button
              type="primary"
              :disabled="scope.row.id === 1 || btnStatus.edit ? true : false"
              icon="iconfont icon-bianji"
              size="mini"
              @click="edit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              type="success"
              :disabled="
                scope.row.id === 1 || btnStatus.update_pwd ? true : false
              "
              icon="iconfont icon-password"
              size="mini"
              @click="update_pwd(scope.row.id)"
              >初始化密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination
        @size-change="handle_size_change"
        @current-change="handle_current_change"
        :total="total"
        :layout="$config.layout"
        :current-page="query_info.page"
        :page-sizes="$config.page_sizes"
        :page-size="query_info.pagesize"
      ></el-pagination>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog
      title="添加"
      v-model="add_dialog_visible"
      :width="$config.percentage_width"
      @close="add_dialog_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="add_form"
        :rules="add_rules"
        ref="add_ref"
      >
        <el-form-item label="权限组" prop="group_id">
          <el-select
            v-model="add_form.group_id"
            placeholder="请选择权限组"
            clearable
          >
            <el-option
              v-for="item in group_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input
            placeholder="请输入名称"
            maxlength="20"
            clearable
            show-word-limit
            v-model="add_form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            placeholder="请输入手机号"
            maxlength="11"
            clearable
            show-word-limit
            v-model="add_form.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input
            placeholder="请输入账号"
            maxlength="14"
            clearable
            show-word-limit
            v-model="add_form.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            maxlength="14"
            clearable
            show-word-limit
            v-model="add_form.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password_confirmation">
          <el-input
            type="password"
            placeholder="请输入确认密码"
            maxlength="14"
            clearable
            show-word-limit
            v-model="add_form.password_confirmation"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="add_dialog_visible = false">取 消</el-button>
        <el-button :disabled="btnStatus.store" type="primary" @click="add()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑"
      v-model="edit_dialog_visible"
      :width="$config.percentage_width"
      @close="edit_dialog_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="edit_form"
        :rules="edit_rules"
        ref="edit_ref"
      >
        <el-form-item label="权限组" prop="group_id">
          <el-select
            v-model="edit_form.group_id"
            placeholder="请选择权限组"
            clearable
          >
            <el-option
              v-for="item in group_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input
            placeholder="请输入名称"
            maxlength="20"
            clearable
            show-word-limit
            v-model="edit_form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            placeholder="请输入手机号"
            maxlength="11"
            clearable
            show-word-limit
            v-model="edit_form.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input
            placeholder="请输入账号"
            maxlength="14"
            clearable
            show-word-limit
            v-model="edit_form.username"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="edit_dialog_visible = false">取 消</el-button>
        <el-button
          :disabled="btnStatus.edit"
          type="primary"
          @click="edit_send()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      // 定义正则表达式
      const regPhone = /^1[3|4|5|6|7|8][0-9]{9}$/;
      if (regPhone.test(value)) {
        return callback();
      }
      callback(new Error("请输入正确的手机号!"));
    };
    var checkUsername = (rule, value, callback) => {
      // 定义正则表达式
      const regUsername = /^[a-zA-Z0-9]{4,14}$/;
      if (regUsername.test(value)) {
        return callback();
      }
      callback(new Error("账号必须4到14位的数字或字母!"));
    };
    var checkPassword = (rule, value, callback) => {
      // 定义正则表达式
      const regPassword = /^[a-zA-Z0-9]{4,14}$/;
      if (regPassword.test(value)) {
        return callback();
      }
      callback(new Error("密码必须4到14位的数字或字母!"));
    };
    var checkPasswordConfirmation = (rule, value, callback) => {
      if (value !== this.add_form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        return callback();
      }
    };
    return {
      btnStatus: this.is_string(
        {
          status: "auth/auth_admin/status",
          store: "auth/auth_admin/store",
          edit: "auth/auth_admin/edit",
          update_pwd: "auth/auth_admin/update_pwd"
        },
        this
      ),
      query_info: {
        group_id: "", // 权限组id
        key: "", // 查询条件
        status: "", // 状态
        created_at: [], // 添加时间
        updated_at: [], // 编辑时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize // 每页显示条数
      },
      group_list: [], // 权限组列表
      list: [], // 列表数据
      total: 0, // 总数据条数
      // 添加对话框是否显示
      add_dialog_visible: false,
      // 编辑对话框是否显示
      edit_dialog_visible: false,
      add_form: {
        group_id: "",
        name: "",
        phone: "",
        username: "",
        password: "",
        password_confirmation: ""
      },
      edit_form: {
        id: "",
        group_id: "",
        name: "",
        phone: "",
        username: ""
      },
      add_rules: {
        group_id: [
          { required: true, message: "请选择权限组！", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入名称！", trigger: "blur" },
          { min: 2, max: 20, message: "名称长度在2到20个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号！", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入账号！", trigger: "blur" },
          { validator: checkUsername, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" }
        ],
        password_confirmation: [
          { required: true, message: "请输入确认密码！", trigger: "blur" },
          { validator: checkPasswordConfirmation, trigger: "blur" }
        ]
      },
      edit_rules: {
        group_id: [
          { required: true, message: "请选择权限组！", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入名称！", trigger: "blur" },
          { min: 2, max: 20, message: "名称长度在2到20个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号！", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入账号！", trigger: "blur" },
          { validator: checkUsername, trigger: "blur" }
        ]
      },
      refresh_rules: { key: [], status: [], created_at: [], updated_at: [] }
    };
  },
  created() {
    this.get_list(() => {
      this.get_group_list();
    });
  },
  methods: {
    // 获取列表
    get_list(callBack) {
      this.$base.request(
        {
          that: this,
          url: "auth/auth_admin/index",
          data: this.query_info
        },
        res => {
          if (res.code === 8888) {
            this.list = res.data.list;
            this.total = res.data.total;
            callBack && callBack();
          }
        }
      );
    },
    // 获取权限组
    get_group_list() {
      this.$base.request(
        {
          that: this,
          url: "auth/auth_admin/group_list"
        },
        res => {
          if (res.code === 8888) {
            this.group_list = res.data;
          }
        }
      );
    },
    // 刷新
    refresh() {
      this.$refs.refresh_ref.resetFields();
      this.get_list();
    },
    // 当前每页多少条选择
    handle_size_change(pagesize) {
      this.query_info.pagesize = pagesize;
      this.get_list();
    },
    // 当前页码
    handle_current_change(page) {
      this.query_info.page = page;
      this.get_list();
    },
    // 状态调整
    set_status(info) {
      this.$base.request(
        {
          that: this,
          method: "PUT",
          url: "auth/auth_admin/status",
          data: { id: info.id, status: info.status ? 1 : 0 }
        },
        res => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg });
          } else {
            info.status = !info.status;
          }
        }
      );
    },
    // 监听添加对话框的关闭事件
    add_dialog_close() {
      this.$refs.add_ref.resetFields();
    },
    // 添加按钮
    add() {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "POST",
              url: "auth/auth_admin/store",
              data: this.add_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.add_dialog_visible = false;
                this.get_list();
              }
            }
          );
        }
      });
    },
    // 打开编辑按钮对话框
    edit(id) {
      this.$base.request(
        {
          that: this,
          url: "auth/auth_admin/edit",
          data: { id: id }
        },
        res => {
          if (res.code === 8888) {
            this.edit_dialog_visible = true;
            this.edit_form = res.data;
          }
        }
      );
    },
    // 提交编辑数据
    edit_send() {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "auth/auth_admin/update",
              data: this.edit_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.edit_dialog_visible = false;
                this.get_list();
              }
            }
          );
        }
      });
    },
    // 监听编辑对话框的关闭事件
    edit_dialog_close() {
      this.$refs.edit_ref.resetFields();
    },
    // 初始化密码
    update_pwd(id) {
      this.$base.confirm(
        { that: this, content: "确定要初始化该管理员的密码为（123456）吗！" },
        () => {
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "auth/auth_admin/update_pwd",
              data: { id: id }
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
              }
            }
          );
        }
      );
    }
  }
};
</script>
